<template>
  <el-form ref="formRef" :model="form" v-loading="loading">
    <pub-edit-description :ndColumns="2">
      <pub-edit-description-item :span="2" label="父级机构">
        <!-- {{ form.pidName }} -->
        {{ form.pname ?? '顶级机构' }}
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="类型名称" required>
        <el-form-item prop="name" :rules="$formRules.input">
          <pub-input v-model="form.name"></pub-input>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="类型编码" required>
        <el-form-item prop="code" :rules="$formRules.input">
          <pub-input-number
            :disabled="dialogType === 'edit'"
            v-model="form.code"
            :min="1"
            :max="99"
          ></pub-input-number>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="机构类型前缀" required>
        <el-form-item prop="prefix" :rules="$formRules.input">
          <pub-input
            :disabled="dialogType === 'edit'"
            v-model="form.prefix"
            :maxlength="10"
          ></pub-input>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="1" label="排序" required>
        <el-form-item prop="sort" :rules="$formRules.input">
          <pub-input-number
            :disabled="dialogType === 'edit'"
            v-model="form.sort"
            :min="0"
          ></pub-input-number>
        </el-form-item>
      </pub-edit-description-item>
      <pub-edit-description-item :span="2" label="备注">
        <el-form-item prop="remark">
          <pub-textarea v-model="form.remark" />
        </el-form-item>
      </pub-edit-description-item>
    </pub-edit-description>
  </el-form>

  <div class="dialog-footer-btn">
    <el-button type="default" @click="emit('cancel')">取消</el-button>
    <el-button type="primary" @click="submit" v-prevent-repeat-click>保存</el-button>
  </div>
</template>
<script setup>
import { add_org_type, get_org_type_detail, edit_org_type } from '@/api/system'
const emit = defineEmits(['cancel', 'success'])
const props = defineProps({
  dialogId: {
    type: String,
    default: ''
  },
  dialogType: {
    type: String,
    default: ''
  },
  pName: {
    type: String,
    default: ''
  }
})
const form = ref({})
const formRef = ref(null)
const loading = ref(false)
const submit = async () => {
  formRef.value.validate(async valid => {
    if (valid) {
      loading.value = true
      let res =
        props.dialogType === 'add'
          ? await add_org_type(form.value)
          : await edit_org_type(form.value)
      if (res.succeed) {
        emit('success')
      }
      loading.value = false
    }
  })
}
const getDetail = async () => {
  loading.value = true
  let { data } = await get_org_type_detail(props.dialogId)
  form.value = data
  loading.value = false
}
onMounted(() => {
  if (props.dialogType == 'add') {
    form.value.pid = props.dialogId
    form.value.pname = props.pName
  } else {
    getDetail()
  }
})
</script>
<style lang="scss" scoped></style>
